<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:爱聊列表
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->



<template>
	<view style="height: 100vh;">
		<!-- 顶部开始 -->
		<view class="head">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<text class="uni-title"></text>
			</view>
			<view class="seach">
				<!-- <image src="/static/home/seach.png" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- 顶部结束 -->
		<view class="content-wrapper" v-if="data.id!=undefined">
			<view class="text-image-content-wrapper" @longpress="showModelData(data)" hover-class="view-hover">

				<view class="text-image-head-wrapper">
					<image class="text-image-head" :src="formatUrl(data.head_img,5)" @click="tapAvater(data.uid)" mode="aspectFill"></image>
					<view class="text-image-name-wrapper">
						<text class="text-image-name">{{data.name}}</text>
						<text class="text-image-time">{{$utils.timeago(data.create_time)}}</text>
					</view>
					<view v-if="user.id!=data.uid" class="user-follow" @tap="tapFollow()">
						<text :class="{'cache':data.follow!='0'}">{{data.follow!='0'?'取消关注':'关注'}}</text>
					</view>

				</view>
				<view v-if="data.type==0" class="text-image-content">
					<text class="text-image-content-text">
						{{data.content}}
					</text>
				</view>
				<view v-if="data.type==1" class="text-image-images-wrapper" @click.stop="()=>{}">
					<text class="text-image-content-text">
						{{data.content}}
					</text>
					<image v-for="(img,i) in StringtoArray(data.images)" :key="i" :src="formatUrl(img,5)" mode="aspectFill" class="text-image-images"
					 :class="{'.text-image-images-3':StringtoArray(data.images).length>=3}" @click="previmg(StringtoArray(data.images),i)">
					</image>

				</view>

			</view>
			<view class="text-image-comment-wrapper">
				<text class="text-image-comment-title">评论 </text>
				<view v-if="commentList.length==0" class="no-data">
					<text>暂无数据</text>
				</view>
				<view v-if="commentList.length>0" class="text-image-comment-list">
					<view v-for="(item,index) in commentList" :key="index" class="text-image-comment-item" hover-class="view-hover"
					 @longpress="showModelData(item)" @click="toSubComment(index)">
						<view class="text-image-head-wrapper">
							<image class="text-image-head text-image-comment-head" :src="formatUrl(item.head_img,5)" @click="tapAvater(item.uid)"
							 mode="aspectFill"></image>
							<view class="text-image-name-wrapper">
								<text class="text-image-name text-image-comment-name">{{item.name}}</text>
								<text class="text-image-time">{{$utils.timeago(item.create_time)}}</text>
							</view>
							<view class="text-image-down-wrapper" @click.stop="showModelData(item)">
								<image class="text-image-down" src="/static/img/down.png" mode="aspectFit"></image>
							</view>

						</view>
						<view class="text-image-content text-image-comment-content">
							<text class="text-image-content-text ">
								{{item.content}}
							</text>
							<view class="comment-sub-count-wrapper">
								<view class="comment-sub-count-wrapper-1">
									<text class="comment-sub-count">{{item.sub_comment_count>0?item.sub_comment_count+'条回复':'回复'}}</text>
								</view>
								<view class="text-image-comment-action-wrapper">
									<view class="text-image-comment-action-item" @click.stop="tapLove1(index)">
										<image class="text-image-action-icon" :src="item.skr!=0?'/static/text_image_icon/skr_red.png':'/static/text_image_icon/skr_black.png'"
										 mode="aspectFit"></image>
										<text class="text-image-action-count" :class="{active:item.skr!=0}">{{item.skr_count}}</text>
									</view>
									<view class="text-image-comment-action-item" @click.stop="tapNegativeComment(index)">
										<image class="text-image-action-icon" :src="item.negative!=0?'/static/text_image_icon/negative_red.png':'/static/text_image_icon/negative_black.png'"
										 mode="aspectFit"></image>
										<text class="text-image-action-count" :class="{active:item.negative!=0}">{{item.negative_count}}</text>
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="loadmore">
						{{isMore?'正在加载中...':'暂无更多评论'}}
					</view>
				</view>
			</view>
		</view>

		<view class="text-image-comment-input-wrapper">
			<view class="text-image-input-wrapper" :style="'flex:'+(keyboardHeight>0?10.5:5)">
				<view class="text-image-pen-wrapper">
					<image class="icon" src="/static/icon/comment.png" mode="aspectFit" />
				</view>
				<input class="comment-input" @focus="focusInput()" :focus="input" :cursor-spacing="20" v-model="content" type="text"
				 value="" confirm-type="send" @confirm="_checkText" placeholder-style="color:rgba(0,0,0,.2)" placeholder="写评论..." />
			</view>
			<view class="text-image-comment-send" :style="'display:'+(keyboardHeight>0?'flex':'none')" @click="_checkText">
				<text>发送</text>
			</view>
			<view class="text-image-action-list" :style="'flex:'+(keyboardHeight>0?0:7)+';display:'+(keyboardHeight>0?'none':'flex')">
				<view class="text-image-action-item" @click.stop="showModelDataShare(data)">
					<image class="icon" src="../../../static/text_image_icon/share_black.png"></image>
					<text class="action-count">{{data.share_count}}</text>
				</view>
				<view class="text-image-action-item" @click="focusInput">
					<image class="icon" src="../../../static/text_image_icon/message_black.png"></image>
					<text class="action-count">{{data.comment_count}}</text>
				</view>
				<view class="text-image-action-item" @click="tapNegative">
					<image class="icon" :src="data.negative!=0?'../../../static/text_image_icon/negative_red.png':'../../../static/text_image_icon/negative_black.png'"></image>
					<text class="action-count" :class="{active:data.negative!=0}">{{data.negative_count}}</text>
				</view>
				<view class="text-image-action-item" @click="tapLove">
					<image class="icon" :src="data.skr!=0?'../../../static/text_image_icon/skr_red.png':'../../../static/text_image_icon/skr_black.png'"></image>
					<text class="action-count" :class="{active:data.skr!=0}">{{data.skr_count}}</text>
				</view>
			</view>
		</view>
		<modal v-model="showModal" :mData="modalData" :type="type" @onConfirm="onConfirm" @cancel="onCancel" :nav="true">
		</modal>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import modal from '@/components/modal/modal.vue'
	import Test from '@/common/test.js'

	export default {
		components: {
			uniIcons,
			modal
		},
		data() {
			return {
				selectModalData: [{
					title: '复制'
				}],
				shareData: [{
						title: '微信好友',
						icon: '/static/img/fenxiang1.png'
					},
					{
						title: '朋友圈',
						icon: '/static/img/fenxiang2.png'
					},
					{
						title: 'QQ好友',
						icon: '/static/img/fenxiang3.png'
					},
					{
						title: 'Q空间',
						icon: '/static/img/fenxiang4.png'
					},
				],
				type: "select",
				modalData: [],
				clickItem: {},
				showModal: false,
				input: false,
				content: "",
				sysheight: 0,
				keyboardHeight: 0,
				data: {},
				commentList: [],
				isMore: true,
				page: 1,
				machineResult: {
					Normal: "正常",
					Polity: "涉政",
					Sex: "色情",
					Terror: "暴恐",
					Legal: "违法违规",
					Ad: "广告"
				}
			}
		},
		created() {
			this.sysheight = uni.getSystemInfoSync().windowHeight
			uni.$on('setTextImageData', (item) => {
				this.data = item;
				this.getCommentData();
			})
			uni.onKeyboardHeightChange(res => {
				console.log("onKeyboardHeightChange", res.height)
				this.keyboardHeight = res.height;
				this.input = this.keyboardHeight > 0
			})
		},
		onReachBottom() {
			this.onLoadMore()
		},
		methods: {
			showModelData(item) {
				this.clickItem = item;
				this.modalData = this.selectModalData;
				this.type = "select";
				this.showModal = true;
			},
			showModelDataShare(item) {
				this.clickItem = item;
				this.modalData = this.shareData;
				this.type = "share";
				this.showModal = true;
			},
			onConfirm(e) {
				var provider = "",
					scene = "",
					type = 1
				let item = this.clickItem;
				switch (e.title) {
					case "复制":

						uni.setClipboardData({
							data: item.content,
							success: function() {
								uni.showToast({
									title: '复制成功',
								});
							}
						});
						break;
					case "不感兴趣":
						/* this.tabList[this.active].videoList.some((item, i) => {
							if (i == this.clickItem) {
								this.tabList[this.active].videoList.splice(i, 1)
								//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
								return true
							}
						})
						this.$set(this.tabList[this.active],'videoList',this.tabList[this.active].videoList) */
						uni.showToast({
							title: '以后少为您推荐该内容',
							icon: 'none'
						});
						break;
					case "内容重复":
						uni.showToast({
							title: '已提交',
							icon: 'none'
						});
						break;
					case "屏蔽此人":
						uni.showToast({
							title: '已为您屏蔽此人',
							icon: 'none'
						});
						break;
					case "微信好友":
						provider = "weixin"
						scene = "WXSceneSession"
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: item.title,
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break
					case "朋友圈":
						provider = "weixin"
						scene = "WXSenceTimeline"
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break
					case "QQ好友":
						provider = "qq"
						scene = ""
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break
					case "Q空间":
						provider = "qq"
						scene = ""
						uni.share({
							provider: provider,
							scene: scene,
							type: type,
							title: this.subContent(item.content),
							summary: item.content,
							href: "http://songshu.youyacao.com/",
							success: function(res) {

							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
						break;
				}
			},
			focusInput() {
				this.input = true;
			},
			onLoadMore() {
				console.log("onLoadMore");
				if (!this.isMore) {
					return;
				}
				this.$api.commentList({
					type: 1,
					vid: this.data.id,
					page: ++this.page
				}).then((res) => {
					if (res.data.code == 0) {
						res.data.data.map((item, key) => {
							this.commentList.push(item);
						})
						if (res.data.data.length < 10) {
							this.isMore = false;
						}
					} else {
						this.isMore = false;
					}
				})
			},
			_checkText() {
				const content = this.content
				if (this.user === null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				if (content.length === 0) {
					return uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
				}
				Test('text', content).then(({
					machine_result
				}) => {
					if (machine_result === 'Normal') {
						this.sendMsg()
					} else {
						const msg = this.machineResult[machine_result]
						uni.showToast({
							title: `检测到您的文字内容涉及${msg}，请重新输入。`,
							icon: 'none'
						})
						this.content = ''
					}
				})
			},
			sendMsg() {
				this.$api.commentSend({
					type: 1,
					vid: this.data.id,
					content: this.content,
					pid: 0
				}).then((res) => {
					this.content = "";
					if (res.data.code == 0) {
						var data = res.data.data;
						data.head_img = this.user.head_img;
						data.name = this.user.name;
						data.skr_count = 0;
						data.skr = 0;
						data.negative = 0;
						data.negative_count = 0;
						data.sub_comment = [];
						console.log(data);
						this.commentList.unshift(data);
						this.data.comment_count++;
					} else {

						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}

				}).catch((res) => {

				})
			},
			getCommentData() {
				if (!this.isMore) {
					return;
				}
				this.$api.commentList({
					type: 1,
					vid: this.data.id,
					page: this.page
				}).then((res) => {
					if (res.data.code == 0) {
						this.commentList = res.data.data;
						if (res.data.data.length < 10) {
							this.isMore = false;
						}
					} else {
						this.isMore = false;
					}
				})
			},
			loadMore() {
				if (!this.isMore) {
					return;
				}
				this.$api.commentList({
					type: 1,
					vid: this.data.id,
					page: ++this.page
				}).then((res) => {
					if (res.data.code == 0) {
						for (let item of res.data.data) {
							this.commentList.push(item);
						}
					} else {
						this.isMore = false;
					}
				})
			},
			StringtoArray(images) {
				if (images == undefined || images == "") {
					return [];
				}
				return images.split(",");
			},
			previmg(urls, index) {
				urls = urls.map((item, key) => {
					return this.formatUrl(item)
				})
				console.log("预览图片", urls, index);
				uni.previewImage({
					current: index,
					indicator: "default",
					urls: urls,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							switch (data.tapIndex) {
								case 0: //保存图片
									uni.downloadFile({
										url: urls[data.index],
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath,
													success: function() {
														uni.showToast({
															title: "保存成功"
														});
													},
													fail: function() {
														uni.showToast({
															title: "保存失败，请稍后重试",
															icon: "none"
														});
													}
												});
											}
										}
									})
									break;
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//点击头像事件
			tapAvater(uid) {
				uni.navigateTo({
					url: '/pages/index/user/other?uid=' + uid
				})
			},
			textImageFollow() {

			},
			formatUrl(url, scale) {
				if (!scale) {
					scale = 1;
				}
				if (url == undefined) {
					return "";
				}
				var index = url.indexOf("http");
				if (index == 0) {
					return url;
				}
				return this.$store.state.baseUrl + "/thumb/" + scale + "?url=" + url;
			},
			tapFollow() {
				if (this.user == null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				var item = this.data;
				var type = 'add';
				if (item.follow != '0') {
					//已关注
					type = 'cancel';
				}
				this.$api.followChange({
					uid: item.uid,
					type: type
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
					this.data.follow = this.data.follow != '0' ? '0' : '1';
					uni.showToast({
						title: res.data.msg
					});
				})
			},
			//点击赞
			tapLove() {
				if (this.user == null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}

				//点赞视频
				this.$api.videoLike({
					type: 1,
					vid: this.data.id,
					skr: this.data.skr != 0 ? "0" : "1",
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						this.data.skr = this.data.skr != 0 ? 0 : 1;
						if (!this.data.skr) {
							this.data.skr_count = this.data.skr_count - 1;
						} else {
							this.data.skr_count = this.data.skr_count + 1;
						}
					}
				}).catch(res => {
					// 失败进行的操作
				})

			},
			tapLove1(index) {

				this.$api.commentLike({
					vid: this.data.id,
					cid: this.commentList[index].id,
					type: 1,
					skr: (this.commentList[index].skr == 0 ? 1 : 0)
				}).then((res) => {
					if (res.data.code == 0) {
						this.commentList[index].skr_count = this.commentList[index].skr == 0 ? this.commentList[index].skr_count + 1 :
							this.commentList[index].skr_count - 1;
						this.commentList[index].skr = this.commentList[index].skr == 0 ? 1 : 0;
					}
				}).catch((res) => {

				})
			},
			//点击踩
			tapNegative() {
				if (this.user == null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				//点踩
				this.$api.videoNegative({
					type: 1,
					vid: this.data.id,
					negative: this.data.negative != 0 ? "0" : "1",
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						this.data.negative = this.data.negative != 0 ? 0 : 1;
						if (!this.data.negative) {
							this.data.negative_count = this.data.negative_count - 1;
						} else {
							this.data.negative_count = this.data.negative_count + 1;
						}
					}
				}).catch(res => {
					// 失败进行的操作
				})

			},
			//点击踩
			tapNegativeComment(index) {
				if (this.user == null) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}

				//点踩
				this.$api.commentNegative({
					type: 1,
					cid: this.commentList[index].id,
					vid: this.data.id,
					negative: this.commentList[index].negative != 0 ? "0" : "1",
				}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					} else {
						this.commentList[index].negative = this.commentList[index].negative != 0 ? 0 : 1;
						if (!this.commentList[index].negative) {
							this.commentList[index].negative_count = this.commentList[index].negative_count - 1;
						} else {
							this.commentList[index].negative_count = this.commentList[index].negative_count + 1;
						}
					}
				}).catch(res => {
					// 失败进行的操作
				})
			},
			//跳转下级评论
			toSubComment(index) {
				uni.navigateTo({
					url: "./sub_comment"
				})
				uni.$emit('setSubCommentData', {
					data: this.commentList[index],
					vid: this.data.id
				});
			}
		},
		computed: {
			user() {
				return this.$store.state.user;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba($color: #000000, $alpha: .05);
	}


	.head {
		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		// background-color: red;
	}

	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		margin-right: 24rpx;
	}

	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}

	.search {
		height: 88rpx;
		line-height: 88rpx;
		flex: 1;
	}

	.content-wrapper {
		background: $uni-bg-color;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 88rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
		padding-bottom: 124rpx;

		width: 100%;
	}

	.loadmore {
		color: rgba($color: #000000, $alpha: .5);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		width: 100vw;
		height: 80rpx;
	}

	.shadow {
		box-shadow: 0 1px 6px #ccc;
	}

	.title-wrap {
		flex: 11;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}


	.seach {
		flex: 1;
		display: flex;
		flex-direction: row;
		position: relative;
		right: 0rpx;
		justify-content: flex-end;
		align-items: center;

		image {
			display: inline-block;
			width: 35rpx;
			height: 25rpx;
			margin-right: 25rpx;

		}
	}

	.text-image-comment-send {
		color: rgba($color: #000000, $alpha: .5);
		padding-right: 24rpx;
		flex: 1.5;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text-image-content-wrapper {

		display: flex;
		flex-direction: column;
		background: white;
		padding: 24rpx;
	}

	.text-image-head-wrapper {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		position: relative;
	}

	.text-image-head {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
	}

	.text-image-name-wrapper {
		margin-left: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-image-name {
		font-size: 27rpx;
		font-family: PingFang SC;

		margin-bottom: 5rpx;
		color: rgba(0, 0, 0, 1);
	}

	.text-image-time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.5);
		line-height: 12px;
	}

	.user-follow {
		display: flex;
		// background-color: #09BB07;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin-right: 24rpx;
		position: absolute;
		right: 0rpx;
		top: 0;
		height: 100%;
		flex-wrap: nowrap;

		text {
			lines: 1;
			padding: 8rpx 24rpx;
			font-size: 20rpx;
			border: 1rpx solid $uni-text-color-active;
			color: white;
			background: rgba(254, 31, 123, 1);
			border-radius: 20px;

			&.cache {
				background-color: rgba($color: #000000, $alpha: .05);
				color: #929292;
				border: none;
			}

		}
	}

	.text-image-content {

		margin-bottom: 24rpx;
	}

	.text-image-content-text {
		width: 100%;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 46rpx;
		margin-bottom: 24rpx;
	}

	.text-image-comment-wrapper {}

	.text-image-comment-title {
		margin-left: 24rpx;
		font-size: 29rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
		line-height: 13px;
		margin-bottom: 12rpx;
	}

	.text-image-comment-list {

		flex-direction: row;

	}

	.text-image-comment-item:last-child {
		border-bottom: none;
	}

	.text-image-comment-item {
		padding: 12rpx 24rpx;
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.04);
	}

	.text-image-comment-head {
		width: 75rpx;
		height: 75rpx;
	}

	.text-image-comment-name {
		font-size: 25rpx;
	}

	.text-image-down-wrapper {
		padding: 0 20rpx;
		height: 100%;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.text-image-down {
		width: 30rpx;
		height: 20rpx;
	}

	.text-image-comment-content {
		padding-left: 87rpx;
		font-family: PingFang SC;
	}

	.comment-sub-count-wrapper {
		position: relative;
		margin-top: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.comment-sub-count-wrapper-1 {
		flex: 8;
	}

	.comment-sub-count {
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		line-height: 12px;
		padding: 5rpx 16rpx;
		border-radius: 19px;
		background: rgba(246, 246, 246, 1);
		font-size: 20rpx;
	}

	.text-image-comment-action-wrapper {
		flex: 4;
		postion: absolute;
		right: 0px;
		top: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.text-image-comment-action-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		margin-left: 24rpx;

	}

	.text-image-action-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.text-image-action-count {
		font-size: 24rpx;
		margin-left: 12rpx;
		padding-bottom: 5rpx;
	}

	.no-data {
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 80rpx;
		align-items: center;

	}

	.no-data>text {
		color: rgba($color: #000000, $alpha: .6);
	}


	.text-image-images-3 {
		max-height: 220rpx;
		max-width: 30vw;
	}

	.text-image-images {
		margin-right: 12rpx;
		flex: 4;
		min-width: 30vw;
		margin-bottom: 12rpx;
	}

	.text-image-images-wrapper {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: -12rpx;
	}

	.text-image-comment-input-wrapper {
		box-shadow: 0px -1px 8px #ccc;
		display: flex;
		flex-direction: row;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 124rpx;
		background: white;
	}

	.text-image-input-wrapper {
		display: flex;
		flex-direction: row;
		height: 100%;
		flex: 5;
		align-items: center;
		align-content: center;
		justify-content: center;
	}

	.text-image-pen-wrapper {
		position: absolute;
		left: 54rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.icon {
		width: 35rpx;
		height: 35rpx;
	}

	.text-image-action-list {
		height: 100%;
		flex: 7;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text-image-action-item {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		align-items: center;
	}

	.comment-input {
		background: rgba(246, 246, 246, 1);
		border-radius: 54rpx;
		margin: 0 30rpx;
		padding: 12rpx 12rpx;
		padding-left: 80rpx;
		width: 100%;

	}

	.action-count {
		margin-top: 12rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 15rpx;
	}
</style>
